<template>
  <div>
    <template v-if="getType === 'int'">
      <el-select
        v-model="typeValue"
        placeholder="请选择"
        @change="handleUpdateValue"
      >
        <el-option
          v-for="item in sexOptionList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    </template>
    <template v-else-if="getType === 'date'">
      <el-date-picker
        style="width: 180px"
        v-model="typeValue"
        value-format="yyyy-MM-dd"
        format="yyyy-MM-dd"
        type="date"
        placeholder="选择日期"
        @change="handleUpdateValue"
      >
      </el-date-picker>
    </template>
    <template v-else-if="getType === 'number'">
      <el-input-number
        v-model="typeValue"
        style="width: 180px"
        :step="2"
        @change="handleUpdateValue"
      ></el-input-number>
    </template>
    <template v-else-if="getType === 'text'">
      <el-input
        type="textarea"
        :rows="2"
        placeholder="请输入内容"
        v-model="typeValue"
        @change="handleUpdateValue"
      >
      </el-input>
    </template>
    <template v-else>
      <div>暂无此类型</div>
    </template>
  </div>
</template>

<script>
export default {
  name: "CustumType",
  props: {
    value: {
      type: [String, Number],
      default: null,
    },

    row: {
      type: Object,
      default: () => {},
    },
  },

  watch: {
    value(val) {
      this.typeValue = val;
      console.log(this.typeValue,"this.typeValue");
    },
    row: {
      deep: true,
      
      handler(e) {
        const { tagCondition } = e
        this.typeValue = tagCondition
      }
    },
  },

  computed: {
    getType() {
      const { tagField } = this.row || {};
      let typeObj = {
        GENDER_CODE: "int",
        RESUME_BEGIN_DATE: "date",
        RESUME_END_DATE: "date",
        RESUME_CONTENT: "text",
      };
      return typeObj[tagField] || '';
    },
  },

  data() {
    return {
      typeValue: "",
      sexOptionList: [
        { label: "男", value: 1 },
        { label: "女", value: 2 },
      ],
    };
  },

  mounted() {
    const { tagCondition = "" } = this.row
    this.typeValue = tagCondition
  },
  methods: {
    // 总的逻辑来处理数据
    handleUpdateValue(e) {
      this.$emit("value", e);

      this.$emit("change", e);
    },
  },
};
</script>

<style  scoped>
</style>